<!-- tabs -->
<template>
  <view class="tabs">
    <u-tabs-swiper
      ref="uTabs"
      :list="list1"
      :current="current"
      bg-color="#90BCCE"
      height="90"
      font-size="24"
      :show-bar="false"
      inactive-color="#FEFEFE"
      @change="tabsChange"
      :is-scroll="false"
      swiperWidth="750"
    ></u-tabs-swiper>
    <swiper
      :style="'height:' + height"
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item class="swiper-item" v-for="item in tabs" :key="item.id">
        <!-- 玩转安吉 -->
        <view class="scenics" v-if="title === '玩转安吉'">
          <view
            class="sce_item"
            v-for="citem in item.child"
            :key="citem.id"
            @click="goScenicDetail"
          >
            <view class="item_left">
              <img :src="citem.src" alt="" />
            </view>
            <view class="item_right">
              <view class="r_top">{{ citem.name }}</view>
              <view class="r_mid">{{ citem.intro }}</view>
              <view class="r_bot">
                <view class="bot_itme">景区等级</view>
                <view class="bot_itme">网红打卡</view>
              </view>
            </view>
          </view>
        </view>
        <!-- 地道风味 -->
        <view class="foods" v-if="title === '地道风味'">
          <view
            class="food_item"
            v-for="citem in item.child"
            :key="citem.id"
            @click="goFoodDetail"
          >
            <img :src="citem.src" alt="" />
            <view class="food_name">{{ citem.name }}</view>
            <view class="food_intro">{{ citem.intro }}</view>
          </view>
        </view>
        <!-- 达人专区 -->
        <view class="expert_people" v-if="title === '达人专区'">
          <view class="expert_item" v-for="citem in item.child" :key="citem.id">
            <view class="item_img">
              <img :src="citem.src" alt="" />
            </view>
            <view class="item_title">{{ citem.title }}</view>
            <view class="p_info">
              <img
                src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/aa7b5cd7119d29fdafe6ff19a9b3f3cd.jpg"
                alt=""
              />
              <span>{{ citem.name }}</span>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  props: ["list1", "title", "tabs", "height"],
  components: {},
  data() {
    return {
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
    };
  },
  computed: {},
  watch: {},
  methods: {
    goScenicDetail() {
      console.log(123);
      this.$u.route("pages/scenicDetail/index");
    },
    goFoodDetail() {
      this.$u.route("pages/foodDetail/index");
    },
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {},
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.tabs {
  background-color: #90bcce;
  .scenics {
    margin-left: 24rpx;
    width: calc(100% - 48rpx);
    .sce_item {
      margin-bottom: 25rpx;
      width: 100%;
      height: 200rpx;
      border-radius: 24rpx;
      padding: 24rpx;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      .item_left {
        width: 150rpx;
        height: 150rpx;
        border-radius: 16rpx;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item_right {
        width: 480rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .r_top {
          font-size: 26rpx;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #010101;
        }
        .r_mid {
          font-size: 22rpx;
          font-weight: 400;
          color: #999999;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .r_bot {
          display: flex;
          .bot_itme {
            margin-right: 24rpx;
            width: 120rpx;
            height: 36rpx;
            text-align: center;
            background: #d6edeb;
            font-size: 22rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #7ab3af;
            border-radius: 10rpx;
          }
        }
      }
    }
  }
  .foods {
    margin-left: 24rpx;
    width: calc(100% - 48rpx);
    height: 469rpx;
    background: #ffffff;
    border-radius: 24rpx;
    padding: 24rpx;
    display: flex;
    justify-content: space-between;
    .food_item {
      display: flex;
      width: 202rpx;
      flex-direction: column;
      justify-content: space-between;
      img {
        width: 202rpx;
        height: 300rpx;
        border-radius: 16rpx;
      }
      .food_name {
        font-size: 26rpx;
        font-weight: 500;
        color: #010101;
      }
      .food_intro {
        font-size: 22rpx;
        font-weight: 400;
        color: #999999;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
  .anji {
    margin-left: 24rpx;
    width: calc(100% - 48rpx);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .anji_item {
      width: 338rpx;
      height: 338rpx;
      border-radius: 16rpx;
      background-color: pink;
      margin-bottom: 24rpx;
    }
  }
  .expert_people {
    margin-left: 24rpx;
    width: calc(100% - 48rpx);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .expert_item {
      width: 338rpx;
      margin-bottom: 20rpx;
      .item_img {
        width: 100%;
        height: 480rpx;
        border-radius: 16rpx;
        margin-bottom: 24rpx;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item_title {
        font-size: 26rpx;
        font-weight: 500;
        color: #fbfbfb;
        margin-bottom: 20rpx;
      }
      .p_info {
        display: flex;
        img {
          width: 32rpx;
          height: 32rpx;
          border-radius: 50%;
        }
        span {
          margin-left: 20rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #7ab3af;
        }
      }
    }
  }
}
</style>